<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<body>
</body>

<script>
var values = [
  {input:"0px", expected:"0px"},
  {input:"0.1px", expected:"1px"},
  {input:"0.25px", expected:"1px"},
  {input:"0.5px", expected:"1px"},
  {input:"0.9px", expected:"1px"},
  {input:"1px", expected:"1px"},
  {input:"1.25px", expected:"1.25px"},
  {input:"1.5px", expected:"1.5px"},
  {input:"2px", expected:"2px"},
  {input:"2.75px", expected:"2.75px"}
];

for (var value of values) {
  var div = document.createElement("div");
  div.style = "border: solid " + value.input + " blue; outline: solid " + value.input + " green; margin-bottom: 20px;"
  document.body.appendChild(div);
}

test(function() {
  var targets = document.querySelectorAll("div");
  for (var i=0; i < targets.length; i++) {
    assert_equals(getComputedStyle(targets[i]).borderWidth, values[i].expected);
    assert_equals(getComputedStyle(targets[i]).outlineWidth, values[i].expected);
  }
}, "Test that chrome rounds up all borders/outlines when they are less than 1px but greater than 0px.");

</script>
